<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>neon rain</title>
    <style>
        boby {
            text-align: center;
        }

        #center_div {
            margin: 0 auto;
            border: 1px solid #000;
            margin-top: 200px;
            width: 500px;
        }

        #center_div_1 {
            margin: 0 auto;
            border: 1px solid #000;
            width: 350px;
            height: 80px;

        }

        #center_div_h1 {
            margin: 0 auto;
            border: 1px solid #000;
            width: 350px;
            height: 60px;
            margin-bottom: 100px;
        }

        * {
            box-sizing: border-box;
        }

        body {
            background-color: black;
            transition: background-color 1000ms linear;
        }

        canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        footer {
            position: absolute;
            height: 50px;
            left: 0;
            bottom: 0;
            width: 100%;
            text-align: right;
            padding: 10px;
            color: grey;
            font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono,
            DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
        }
    </style>
</head>
<body>

<canvas id="main"></canvas>
<canvas id="middle"></canvas>
<canvas id="final"></canvas>

<div id="center_div">
    <div id="center_div_h1" style="color: aliceblue;position: fixed;margin-bottom: 50px"><h1>测试后台</h1></div>
    <div id="center_div_1" style="position: fixed; margin-left: 70px; margin-top: 100px">
        <div class="loginBoxCenter">
            <p><label for="username" style="color:red;">用户名：</label></p>
            <p><input type="username" id="username" name="username" placeholder="请输入邮箱/手机号"
                      style="height: 30px;width: 300px"></p>
            <p><label for="password" style="color:red;">密码：</label></p>
            <p><input type="password" id="password" name="password" placeholder="请输入密码"
                      style="height: 30px;width: 300px"></p>
            <p><label for="password_1" style="color:red;">密码验证：</label></p>
            <p><input type="password_1" id="password_1" name="password_1" placeholder="请再次输入密码"
                      style="height: 30px;width: 300px"></p>

            <div class="loginBoxButtons" style="margin-left: 110px;">
                <button id="loginBtn" class="loginBtn" name="loginBtn" style="height: 30px;width: 100px"
                        onclick="check1()">确定
                </button>
            </div>
        </div>
    </div>

</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
    function check1() {
        var username = document.getElementById("username")
        var password = document.getElementById("password");
        var password_1 = document.getElementById("password_1");
        if (password.value != password_1.value) {
            alert("两次密码输入不一样，请重新输入");
        } else if (username.value == "" || password.value == "" || password_1.value == "") {
            alert("请将注册信息填写完整")
        } else {
            jQuery.ajax(
                {
                    type: "GET",
                    url: "http://localhost:8100/polls/user_mysql/",
                    data: {username: username.value, password: password.value},
                    success: function (data) {
                        alert("注册成功")
                        window.open('http://localhost:8100')
                    }
                })
        }
    }
</script>
<script>
    // mouse
    const mouse = {
        x: 0,
        y: 0,
        prevX: 0,
        prevY: 0,
        dead: false,
        right() {
            return this.x >= this.prevX;
        }
    };
    const movements = ["touchstart", "mousemove", "touchmove"];
    const leaves = ["touchend", "mouseleave", "mouseout"];

    function updateMouse(x, y) {
        mouse.prevX = mouse.dead ? 0 : mouse.x;
        mouse.prevY = mouse.dead ? 0 : mouse.y;

        mouse.x = x;
        mouse.y = y;
    }

    function setUpEvent() {
        movements.forEach((move) => {
            window.addEventListener(move, function (event) {
                event.preventDefault();
                const {x, y} = getMousePos(canvas, event, mouse);
                mouse.dead = false;
                updateMouse(x, y);
            });
        });
        leaves.forEach((move) => {
            window.addEventListener(move, function (event) {
                event.preventDefault();
                updateMouse(0, 0);
                mouse.dead = true;
            });
        });
    }

    ///https://levelup.gitconnected.com/using-prototype-vs-this-in-a-javascript-class-can-help-save-memory-816636418c3e
    const colors = [
        {
            canvas: document.getElementById("main"),
            context: document.getElementById("main").getContext("2d"),
            drops: [],
            color: "#00FFFC",
            speed: 1.5,
            radius: 1
        },
        {
            canvas: document.getElementById("middle"),
            context: document.getElementById("middle").getContext("2d"),
            drops: [],
            color: "#FC00FF",
            speed: 2,
            radius: 2
        },
        {
            canvas: document.getElementById("final"),
            context: document.getElementById("final").getContext("2d"),
            drops: [],
            color: "#fffc00",
            speed: 2.5,
            radius: 3
        }
    ];

    const triadic = ["#00FFFC", "#FC00FF", "#fffc00"];

    function getRandomIntInclusive(min, max) {
        min = Math.ceil(min);
        max = Math.floor(max);
        return Math.floor(Math.random() * (max - min + 1) + min); //The maximum is inclusive and the minimum is inclusive
    }

    const canvas = document.getElementById("main");
    const middle = document.getElementById("middle");
    const final = document.getElementById("final");

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    middle.width = window.innerWidth;
    middle.height = window.innerHeight;
    final.width = window.innerWidth;
    final.height = window.innerHeight;

    class Drop {
        constructor(color, yVelocity, radius, current) {
            this.xPos = Math.random() * (window.innerWidth - 20);
            this.yPos = Math.random() * 20;
            this.fallSpeed = Math.random() * 0.5 + 0.5 + yVelocity;
            this.radius = radius;
            this.color = color;
            this.end = false;
            this.canvas = current;
            this.xDirection = 0;
        }
    }

    //
    Drop.prototype.draw = function drawDrop() {
        // console.log(this.y);
        // console.log(this.color)
        let radius = this.radius;
        let current = this.canvas;
        current.beginPath();

        current.moveTo(this.xPos - radius, this.y);

        if (this.xDirection !== 0) {
            current.arc(this.xPos, this.yPos, radius, 0, 2 * Math.PI);
        } else {
            current.lineTo(this.xPos, this.yPos - 20);
            current.lineTo(this.xPos + radius, this.y);

            current.arc(this.xPos, this.yPos, radius, 0.25 * Math.PI, 0.75 * Math.PI);
        }

        current.fillStyle = this.color;
        current.closePath();
        current.fill();
        return this;
    };
    //
    Drop.prototype.fall = function dropFall() {
        this.yPos += this.fallSpeed;
        this.xPos += this.xDirection;
        if (this.xDirection === 0) {
            this.xDirection = 0;
        } else if (this.xDirection < 0) {
            this.xDirection += 0.02;
        } else {
            this.xDirection -= 0.02;
        }
        if (this.yPos >= window.innerHeight + this.radius) {
            this.end = true;
        }
        return this;
    };
    let check = false;

    function checkCollision(drop, touch) {
        // if(check){
        //   return;
        // }
        if (touch.dead) {
            return;
        }
        if (
            drop.xPos > touch.x &&
            drop.yPos > touch.y &&
            drop.xPos < touch.x + 25 &&
            drop.yPos < touch.y + 25
        ) {
            drop.yPos -= 5;
            drop.yVelocity *= -5;
            drop.xDirection = touch.right() ? -5 : 5;
            drop.color = "white";
            // alert("!");
        }
        // console.log(drop.xPos, touch.x);
        check = true;
        return drop.xPos === touch.x && drop.yPos === touch.y;
    }

    function updateDrops(array, cb) {
        for (let i = array.length - 1; i >= 0; i--) {
            array[i].fall();
            if (array[i].end === true) {
                // start - start of position to make change
                // delete - 1 from the index we passed in
                array.splice(i, 1);
            }
        }
        if (array.length < window.innerWidth / sizeFactor) {
            cb();
        }
    }

    function getMousePos(current, evt) {
        const rect = current.getBoundingClientRect();
        return {
            x: evt.clientX - rect.left,
            y: evt.clientY - rect.top
        };
    }

    function animate(current, yVelocity, radius, drops) {
        // fill the canvas with the orange background
        let color = triadic[getRandomIntInclusive(0, triadic.length - 1)];
        current.clearRect(0, 0, canvas.width, canvas.height);
        // ctx.clearRect(0, 0, canvas.width, canvas.height);
        // make all drops fall and then redraw them
        for (let i = 0; i < drops.length; i++) {
            drops[i].fall();
            if (drops[i].end === true) {
                // start - start of position to make change
                // delete - 1 from the index we passed in
                drops.splice(i, 1);
            } else {
                checkCollision(drops[i], mouse);
                drops[i].draw();
            }
        }
        if (drops.length < window.innerWidth / 4) {
            drops.push(new Drop(color, yVelocity, radius, current));
        }
        requestAnimationFrame(() => {
            animate(current, yVelocity, radius, drops);
        });
    }

    const startAnimation = () =>
        requestAnimationFrame(() => {
            for (let element of colors) {
                // console.log(element);
                animate(element.context, element.speed, element.radius, element.drops);
            }
        });
    window.addEventListener("load", () => {
        setUpEvent();
        startAnimation();
    });

    function reset(canvasObject) {
        canvasObject.canvas.width = window.innerWidth;
        canvasObject.canvas.height = window.innerHeight;
        canvasObject.drops = [];
    }

    window.addEventListener("resize", () => {
        for (let element of colors) {
            reset(element);
        }
        startAnimation();
    });
</script>


</body>
</html>
